<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/home.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/jQuerySinaEmotion/jquery.sinaEmotion.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/page/third/jquerytime/js/jquery.min_v1.0.js" type="text/javascript"></script>
<style type="text/css">
.page { width:100%;background:#F0F0F0 url('${pageContext.request.contextPath}/page/third/jquerytime/img/dian2.png') repeat-x; }
.box h2{
    font-weight: 100;
    display: block;
    color: #000;
    font-weight: 500;
    font-size: 28px;
    padding: 5px 0 7px;
}
.box .date{
    margin: 0 5px;
    font-size: 14px!important;
}
.box .info{
    margin: 5px 10px;
    padding-bottom: 8px;
    font-size: 14px;
    color: #666;
}
.box .content{
    padding: 11px 0 7px 0;
    line-height: 24px;
    font-size: 16px;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    margin: 5px 10px;
    color: #666;
}

.repliestitle{
    font-size: 10px;
    padding-top: 6px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    line-height: 30px;
    height: 37px;
    background-color: #fff;
}
 .addcomment {
    padding-left: 22px;
    height: 16px;
    line-height: 16px;
    display: block;
    font-size: 11px;
    float: left;
    margin-right: 15px;
}
 a.curtab {
    background: #FCFCFC;
    border: 1px solid #CCC;
    border-bottom-color: #FCFCFd;
}
 a.curtab {
    padding: 0px 10px;
    margin-bottom: -1px;
    display: block;
    float: right;
    color: #555;
    text-decoration: none;
    border: 1px solid #CCC;
    border-bottom-color: #FCFCFd;
    margin-right:10px;
}
.comment{
padding-right:5px;
padding-top:5px;
font-size:14px;
}
.commentlistzone{
	margin-top:20px;
}
.commentlist .comment-body .comment-meta {
    background: #f1f5f8;
    position: relative;
    height: auto;
    min-height: 37px;
    line-height: 37px;
    padding-left: 45px;
}
.commentlist .comment-body .comment-meta img {
    background-color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    position: absolute;
    display: block;
    left: -40px;
    top: 10px;
    margin: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.commentlist li {
    margin: 10px 0 10px 0;
    list-style: none;
    border: 2px solid #f1f5f8;
    padding: 2px;
    background-color: #fff;
    border-radius: 4px;
}
.commentlist .comment-body .comment-metadata {
    text-transform: uppercase;
    float: right;
    margin-right: 10px;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}
.commentlist .comment-body .comment-content {
    padding: 20px 55px 30px 45px;
    position: relative;
}
.respond{
    padding: 20px 55px 30px 55px;
    position: relative;
}
.comment-reply-link{
    position: absolute;
    bottom: 3px;
    right: 12px;
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    color: #3d4450;
}
.respond .row {
    margin-bottom: 6px;
}
#emoticon {
    float: left;
    padding-left: 2px;
    position: absolute;
    left: 50px;
    bottom: 75px;
    z-index: 99;
}
#emoticon .emoticon-icon {
    width: 22px;
    height: 22px;
    background: url(${pageContext.request.contextPath}/page/image/bq.png) no-repeat;
    cursor: pointer;
    display: block;
}
</style>

<script type="text/javascript">
$(function() {
	$(document).scroll(function(){
		var window_H = $(window).height();
		// 当屏幕滚出第一屏时，我们让这个按钮出现。
		var h2 = $(document).scrollTop();
		// 判断
		if( h2 >= window_H){
			// 当第一屏即将要滚出去的时候我们要显示返回顶部按钮
			$('.back_top').css('display','block');
		}else{
			$('.back_top').fadeOut(400);
		}
	});
	// 点击图片按钮的时候让我们的页面返回到顶部
	$('.back_top').click(function(){
		$('html,body').animate({'scrollTop':0});
	});	
	$('.back_top').hover(function(){
		$('.back-to-top').hide();
		$('#back_top_font').show();		
	},function(){
		$('.back-to-top').show();
		$('#back_top_font').hide();
	});	


});

</script>
</head>
<body class="nav-fixed" >
		<!--导航条  -->
 		<jsp:include page="/WEB-INF/mypage/website/home_nav.jsp"></jsp:include>

		  <!--主页面  -->
		  <div id="zyn-bodyer"></div>
      <div class="container theme-showcase" role="main">		  	       
		    <div class='col-md-9 main'>
		    <!--面包屑导航  -->
			  <ol class="breadcrumb">
				  <li><a href="#">Home</a></li>
				  <li><a href="#">2013</a></li>
				  <li class="active">十一月</li>
			  </ol>	
 			  <div class="box">
				<h2>留言板</h2>
				<div class="info">
					<span class="date">日期: Dec 12th Sat, 2009</span>/ <span class="views">浏览: 251,910 views</span>        			<div class="fixed"></div>
				</div>	
				<div class="content">
					<p style="margin-right: 80px;">自以为聪明的人，往往是没有好下场的，世界上最聪明的人是老实的人，</p>
					<p style="padding-left: 230px;">因为只有老实人才能经得起事实和历史的考验。<span style="padding-left: 50px;">—— 周恩来</span></p>
				    <div class="fixed"></div>	
				</div>	
				<div class="commentmain">
					<div class="repliestitle">
						<a  class="curtab" href="javascript:void(0);">评论 (26)</a>
						<span class="addcomment"><a href="#respond"><i class="glyphicon glyphicon-comment comment"></i>发表评论</a></span>
					</div>	
					<!--评论  -->
					<div class="commentlistzone">
						<ol class="commentlist">
							<li id="comment-4" class="comment even thread-even depth-1 parent">
								<article id="div-comment-4" class="comment-body">
									<footer class="comment-meta">
										<div class="comment-author vcard">
											<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
												<b class="fn">
													<a href="" rel="external nofollow" class="floor">小炜</a>
												</b>&nbsp;&nbsp;&nbsp;&nbsp;
												<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16">2016/6/24 9:35:16</time></a>
										 		<div class="comment-metadata" style="color:#D2322D">#1</div>
										 </div>
									</footer>
									<div class="comment-content">
										<p>6666！好牛呀！我现在转前端了，有空咱交流交流吧！</p>
										<div class="reply">
											<a class="comment-reply-link" >回复</a>
										</div>										
									</div>								
								</article>
							</li>	
							<li id="comment-4" class="comment even thread-even depth-1 parent">
								<article id="div-comment-4" class="comment-body">
									<footer class="comment-meta">
										<div class="comment-author vcard">
											<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
												<b class="fn">
													<a href="" rel="external nofollow" class="floor">小炜</a>
												</b>&nbsp;&nbsp;&nbsp;&nbsp;
												<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16">2016/6/24 9:35:16</time></a>
										 		<div class="comment-metadata" style="color:#D2322D">#1</div>
										 </div>
									</footer>
									<div class="comment-content">
										<p>6666！好牛呀！我现在转前端了，有空咱交流交流吧！</p>
										<div class="reply">
											<a class="comment-reply-link" >回复</a>
										</div>										
									</div>
								
								</article>
							</li>	
						</ol>
					</div>
				<!--回复 -->
					<div class="respond">
					<form>
						<div id="author_info">
							<div class="row">
								<label for="author" class="small">昵称 (*) :</label>
								<div class="input-group">
									<div class="input-group-addon comment-name">
										<span class="glyphicon glyphicon-user " ></span>
									</div>
									<input type="text" name="author" id="author" class="form-control" style="width: 40%" value="" size="24" tabindex="1">
								</div>
							</div>
							<div class="row">
								<label for="email" class="small">电子邮箱 (*) :</label>
								<div class="input-group">
									<div class="input-group-addon comment-name">
										<span class="glyphicon glyphicon-user " ></span>
									</div>							
									<input type="text" name="email" id="email" class="form-control" style="width: 40%" value="" size="24" tabindex="2">
								</div>
							</div>
							<div class="row" >
								<textarea name="comment" id="comment" tabindex="4" rows="8" cols="125"></textarea>
								<div id="emoticon">
									<span class="emoticon-icon face" ></span>
								</div>
							</div>
						</div>
							<!-- comment submit and rss -->
							<div id="submitbox">
								<div class="submitbutton">
									<input name="submit" type="submit" id="submit" class="button" tabindex="5" value="提交评论 (Ctrl+Enter)">
								</div>

							</div>
					</form>					
						</div>			
				</div>			
	 		  </div>
			</div>	
		    <div class='col-md-3 sidebar'>
		    <!--侧边栏目  -->
 			<jsp:include page="/WEB-INF/mypage/website/aside.jsp"></jsp:include>	    			        					    			
		    </div>	  
		</div>	
</body>
<script src="${pageContext.request.contextPath}/page/third/jQuerySinaEmotion/jquery.sinaEmotion.js" type="text/javascript"></script>
<script type="text/javascript">
/* var content = $(this).parents('form').find('.content').val();//评论内容如【嘻嘻】表情
$(function(){
	$("#comment").change(function(){
		alert($("#comment").val())
		$("#comment").val($("#comment").val().parseEmotion())
	})
}) */

//$('#result').html(content).parseEmotion();对评论内容进行解析生成img标签
//可以写隐藏div保存评论内容字段
$('.face').bind({
	click: function(event){
		if(! $('#sinaEmotion').is(':visible')){
			$(this).sinaEmotion();
			event.stopPropagation();
		}
	}
});  
</script>
</html>
